<template>
  <div class="issue-form">
    <textarea v-model="description" placeholder="描述问题..."></textarea>
    <image-uploader v-model="images" />
    <div class="form-actions">
      <button @click="submit">提交问题</button>
      <button class="cancel" @click="cancel">取消</button>
    </div>
  </div>
</template>

<script>
import ImageUploader from './ImageUploader.vue'

export default {
  components: { ImageUploader },
  emits: ['submit', 'cancel'],
  data() {
    return {
      description: '',
      images: []
    }
  },
  methods: {
    submit() {
      this.$emit('submit', {
        description: this.description,
        images: this.images
      })
      this.reset()
    },
    cancel() {
      this.$emit('cancel')
      this.reset()
    },
    reset() {
      this.description = ''
      this.images = []
    }
  }
}
</script>

<style scoped>
.issue-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

button {
  padding: 8px 16px;
}

.cancel {
  background: #666;
}
</style>
